<template>
	<a-layout-content
			style="flex: 0 0 1270px;min-width: 1270px;max-width: 1270px;width: 1270px;position: relative;left: 15px;background: #ffffff !important;">
		<right-top icon="19.png" text="添加规则">
			<a-tabs default-active-key="1" style="position: absolute;right: 65%;top: 22px;font-weight: 400;"
			        size="small"
			        @change="callback">
				<a-tab-pane key="1" tab="标准模式"></a-tab-pane>
				<a-tab-pane key="2" tab="高级模式" force-render></a-tab-pane>
			</a-tabs>
		</right-top>
		<div class="right-content" v-if="change==1">
			<a-form-model :model="rulesForm" :rules="rules" ref="ruleForm" layout="inline" style="margin-left: 13%"
			              :form="form">
				<a-row style="margin-top: 20px;">
					<a-col :span="15">
						<a-form-model-item :label-col="{span:4}" :wrapper-col="{span:18}" prop="ruleName" ref="ruleName"
						                   style="width: 100%">
							<span slot="label"><span style="color: red;">*</span>规则名称</span>
							<a-input style="" class="inputBox" v-model="rulesForm.ruleName"
							         @blur="() => {$refs.ruleName.onFieldBlur();}"/>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row style="margin-bottom: 0%;margin-left: 0.3%;">
					<a-col :span="15" class="noborder">
						<a-form-item :label-col="{span:4}"
						             :wrapper-col="{span:18}">
							<span slot="label"><span style="color: red;">*</span>媒体类型</span>
							<a-checkbox-group name="contractClass" v-decorator="['contractClass']"
							                  style="width: 200%;margin-top: -2%">
								<a-row>
									<a-col style="margin-left: 20px;" :span="2">
										<a-checkbox :indeterminate="indeterminate" :checked="AllCheckmedia"
										            @change="onCheckAllChange_media">
											全部
										</a-checkbox>
									</a-col>
									<div style="margin-left:-20px" class="plainoption">
										<a-checkbox-group v-model="checkedList_media" @change="onChange_media">

											<a-checkbox v-if="i<8" :value="item.mediaName" v-for="(item,i) in media_type">
												{{ item.mediaName }}
											</a-checkbox>
										</a-checkbox-group>
									</div>
								</a-row>
								<a-row style="position: relative;margin-left: -9.3%;" v-show="media_type.length >= 8">
									<a-col :span="21" :push="2" style="margin-left: 2%;">
										<a-checkbox-group v-model="checkedList_media2" @change="onChange_media1">
											<a-checkbox v-if="i>=8" :value="item.mediaName" v-for="(item,i) in media_type">
												{{ item.mediaName }}
											</a-checkbox>
										</a-checkbox-group>
									</a-col>
								</a-row>
							</a-checkbox-group>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row style="margin-top: 3%;">
					<a-col :span="15">
						<a-form-model-item label="层级深度" :label-col="{span:4}" :wrapper-col="{span:18}"
						                   style="width: 100%">
							<a-select placeholder="请选择" v-model="rulesForm.depth" disabled>
								<a-select-option value="1">1</a-select-option>
								<a-select-option value="2">2</a-select-option>
								<a-select-option value="3">3</a-select-option>
								<a-select-option value="4">4</a-select-option>
								<a-select-option value="5">5</a-select-option>
							</a-select>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row style="margin-left: 4%;">
					<a-col :span="2" style="margin-left: -1%;">
						<span style="color: black;"><span style="color:red;">*</span> 关键词组：</span>
					</a-col>
					<a-col :span="21" id="keywords" style="">
						<a-row style="margin-left: 0%;width: 100%;height: auto;">
							<a-col :span="20" style="margin-left: 0%;padding: 10px 10px 10px 10px;">
								<a-textarea
										placeholder="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
										:rows="4" style="width: 96%;"
										:auto-size="{ minRows: 4, maxRows: 4 }" v-model="rulesForm.keyword1"/>
							</a-col>
							<a-col :span="4">
								<div style="margin-left:-30px">
									<img
											title="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
											src="../../assets/images/wenhao.svg" style="cursor:pointer"/>

									<div style="font-size: 14px;cursor: pointer;margin-top:10px" @click="addkeyworkGroup(flat)">新增</div>
								</div>
							</a-col>
						</a-row>
						<!--关键词2-->
						<a-row v-if="keywork2_flag" style="margin-left: 0%;width: 100%;height: auto;" class="group2">
							<a-col :span="20" style="margin-left: 0%;padding: 0px 10px 10px 10px;">
								<a-textarea
										placeholder="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
										:rows="4" style="width: 96%;"
										:auto-size="{ minRows: 4, maxRows: 4 }" v-model="rulesForm.keyword2"/>
							</a-col>
							<a-col :span="4">
								<div style="margin-left:-30px">
									<img
											title="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
											src="../../assets/images/wenhao.svg" style="cursor:pointer"/>

									<div style="font-size: 14px;cursor: pointer;" @click="hideKeywordGroup(1)">删除</div>
								</div>
							</a-col>
						</a-row>
						<!--关键词3-->
						<a-row v-if="keywork3_flag" style="margin-left: 0%;width: 100%;height: auto;" class="group3">
							<a-col :span="20" style="margin-left: 0%;padding: 0px 10px 10px 10px;">
								<a-textarea
										placeholder="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
										:rows="4" style="width: 96%;"
										:auto-size="{ minRows: 4, maxRows: 4 }" v-model="rulesForm.keyword3"/>
							</a-col>
							<a-col :span="4">
								<div style="margin-left:-30px">
									<img
											title="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
											src="../../assets/images/wenhao.svg" style="cursor:pointer"/>

									<div style="font-size: 14px;cursor: pointer;" @click="hideKeywordGroup(2)">删除</div>
								</div>
							</a-col>
						</a-row>
						<!--关键词4-->
						<a-row v-if="keywork4_flag" style="margin-left: 0%;width: 100%;height: auto;" class="group4">
							<a-col :span="20" style="margin-left: 0%;padding: 0px 10px 10px 10px;">
								<a-textarea
										placeholder="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
										:rows="4" style="width: 96%;"
										:auto-size="{ minRows: 4, maxRows: 4 }" v-model="rulesForm.keyword4"/>
							</a-col>
							<a-col :span="4">
								<div style="margin-left:-30px">
									<img
											title="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
											src="../../assets/images/wenhao.svg" style="cursor:pointer"/>

									<div style="font-size: 14px;cursor: pointer;" @click="hideKeywordGroup(3)">删除</div>
								</div>
							</a-col>
						</a-row>
						<!--关键词5-->
						<a-row v-if="keywork5_flag" style="margin-left: 0%;width: 100%;height: auto;" class="group5">
							<a-col :span="20" style="margin-left: 0%;padding: 0px 10px 10px 10px;">
								<a-textarea
										placeholder="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
										:rows="4" style="width: 96%;"
										:auto-size="{ minRows: 4, maxRows: 4 }" v-model="rulesForm.keyword5"/>
							</a-col>
							<a-col :span="4">
								<div style="margin-left:-30px">
									<img
											title="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
											src="../../assets/images/wenhao.svg" style="cursor:pointer"/>

									<div style="font-size: 14px;cursor: pointer;" @click="hideKeywordGroup(4)">删除</div>
								</div>
							</a-col>
						</a-row>
					</a-col>
				</a-row>
				<a-row style="margin-top: 3%;margin-left: -4%">
					<a-col :span="2" style="margin-left: 9%;">
						<span style="">歧义词：</span>
					</a-col>
					<a-col :span="15" style="margin-left: -3.5%;">
						<a-textarea
								placeholder="歧义词中所包含的关键词不生效。例如：关键词为【河北】，歧义词为【黄河北岸】，则【黄河北岸】不会作为【河北】的关键词被命中。"
								:rows="4"
								:auto-size="{ minRows: 4, maxRows: 4 }" v-model="rulesForm.ambiguousWords"/>
					</a-col>
				</a-row>

				<a-row style="margin-top: 5%;margin-left: -4%">
					<a-col :span="2" style="margin-left: 9%;">
						<span style="">排除词：</span>
					</a-col>
					<a-col :span="15" style="margin-left: -3.5%">
						<a-textarea
								placeholder="选填项，含有排除词的信息不被系统抓获，多个词用英文分号(;)间隔。例如：关键词为【河北】，排除词为【邯郸】，则同时含有【河北】【邯郸】的信息不会抓取命中。"
								:rows="4"
								:auto-size="{ minRows: 4, maxRows: 4 }" v-model="rulesForm.excludedWords"/>
					</a-col>
				</a-row>
				<a-row style="margin-top: 5%;margin-left: -4%">
					<a-col :span="2" style="margin-left: 9%;">
						<span style="">负面词：</span>
					</a-col>
					<a-col :span="15" style="margin-left: -3.5%">
						<a-textarea
								placeholder="选填项，系统根据负面词将信息标注为负面，多个词用英文分号(;)间隔。例如：关键词为【河北】，负面词为【邯郸】，则同时含有【河北】【邯郸】的信息直接判定性质为负面。"
								:rows="4"
								:auto-size="{ minRows: 4, maxRows: 4 }" v-model="rulesForm.negativeWords"/>
					</a-col>
				</a-row>
				<a-row style="margin-top: 6%;">
					<a-col :span="15">
						<a-form-model-item label="作者" :label-col="{span:4}" :wrapper-col="{span:18}"
						                   style="width: 100%">
							<a-input placeholder="请输入作者" class="inputBox" v-model="rulesForm.author"/>
						</a-form-model-item>
					</a-col>

				</a-row>
				<a-row style="">
					<a-col :span="15">
						<a-form-model-item label="目标站点" :label-col="{span:4}" :wrapper-col="{span:18}"
						                   style="width: 100%">
							<a-input placeholder="多个域名请用英文逗号分隔" class="inputBox" v-model="rulesForm.targetWebsite"/>
						</a-form-model-item>
					</a-col>

				</a-row>
				<a-row>
					<div style="padding-left: 10.5%;line-height:20px">
						输入本对象关注的指定网站，如：本对象只关注百度贴吧和微博的信息， <br>
						添加：tieba.baidu.com,weibo.com
					</div>
				</a-row>
				<a-row>
					<a-col :span="15">
						<a-form-model-item label="排除站点" :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 100%">
							<a-input placeholder="多个域名请用英文逗号分隔" class="inputBox" v-model="rulesForm.outSite"/>

						</a-form-model-item>
					</a-col>

				</a-row>
				<a-row>
					<div style="padding-left: 10.5%;line-height:20px">
						输入本对象排除的指定网站，如：本对象只排除百度贴吧和微博的信息，<br>
						添加：tieba.baidu.com,weibo.com
					</div>
				</a-row>


				<a-row style="padding-left: 3%">
					<a-col :span="9">
						<a-form-model-item :label-col="{span:5}" :wrapper-col="{span:18}"
						                   style="width: 100%">
							<span slot="label"><span style="color: red;">*</span>检测范围</span>
							<a-radio-group name="radioGroup" :default-value="3" v-model="rulesForm.testRange">
								<a-radio :value="1">
									全文
								</a-radio>
								<a-radio :value="2">
									段落
								</a-radio>
								<a-radio :value="3">
									自然句
								</a-radio>
							</a-radio-group>
						</a-form-model-item>
					</a-col>
					<a-col :span="9" v-show="ruleFlag == 1">
						<a-form-model-item :label-col="{span:4}" :wrapper-col="{span:18}"
						                   style="width: 100%">
							<span slot="label"><span style="color: red;">*</span>可见性</span>
							<a-radio-group name="radioGroup" v-model="rulesForm.isShow">
								<a-radio :value="1">
									系统
								</a-radio>
								<a-radio :value="2">
									仅自己
								</a-radio>
							</a-radio-group>
						</a-form-model-item>
					</a-col>
					<a-col :span="9" v-show="ruleFlag == 2">
						<a-form-model-item :label-col="{span:4}" :wrapper-col="{span:18}"
						                   style="width: 100%">
							<span slot="label"><span style="color: red;">*</span>可见性</span>
							<a-radio-group name="radioGroup" disabled v-model="rulesForm.isShow">
								<a-radio :value="1">
									系统
								</a-radio>
								<a-radio :value="2">
									仅自己
								</a-radio>
							</a-radio-group>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row style="padding-left: 3%">
					<a-col :span="9">
						<a-form-model-item :label-col="{span:5}" :wrapper-col="{span:18}"
						                   style="width: 100%">
							<span slot="label"><span style="color: red;">*</span>图像识别</span>
							<a-radio-group name="radioGroup" :default-value="2" v-model="rulesForm.imageRecognition">
								<a-radio :value="1">
									启用
								</a-radio>
								<a-radio :value="2">
									不启用
								</a-radio>
							</a-radio-group>
						</a-form-model-item>
					</a-col>
				</a-row>

				<a-row style="padding-left: 3%">
					<a-col :span="9">
						<a-form-model-item :label-col="{span:5}" :wrapper-col="{span:18}"
						                   style="width: 100%">
							<span slot="label"><span style="color: red;">*</span>预警推送</span>
							<a-switch style="" v-model="rulesForm.warningPush"/>
						</a-form-model-item>
					</a-col>
					<a-col :span="9">
						<a-form-model-item :label-col="{span:5}" :wrapper-col="{span:18}"
						                   style="width: 100%">
							<span slot="label"><span style="color: red;">*</span>是否订阅</span>
							<a-switch style="" v-model="rulesForm.subscribe"/>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row style="margin-left: 4%">
					<a-col :span="20" style="text-align: center">
						<a-button style="margin-right: 10px;color: black" @click="goHomePage">返回</a-button>
						<a-button style="margin-right: 10px;background-color: #22AD38;color: white" @click="buttonAdd">
							添加
						</a-button>
						<a-button style="margin-right: 10px;color: black" @click="handleReset">重置</a-button>
					</a-col>
				</a-row>
			</a-form-model>
		</div>

		<!--高级模式-->
		<div class="right-content" v-if="change==2">
			<a-form-model :model="rulesForm" layout="inline" style="margin-left: 13%">
				<a-row style="margin-top: 20px;">
					<a-col :span="15">
						<a-form-model-item :label-col="{span:4}" :wrapper-col="{span:18}"
						                   style="width: 100%">
							<span slot="label"><span style="color: red;">*</span>规则名称</span>
							<a-input v-model="rulesForm.ruleName" class="inputBox"/>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row style="margin-left: 0.3%;margin-bottom: 0%;">
					<a-col :span="15" class="noborder">
						<a-form-item :label-col="{span:4}"
						             :wrapper-col="{span:18}">
							<span slot="label"><span style="color: red;">*</span>媒体类型</span>
							<a-checkbox-group name="contractClass" v-decorator="['contractClass']"
							                  style="width: 200%;margin-top: -2%">
								<a-row>
									<a-col style="margin-left: 20px;" :span="2">
										<a-checkbox :indeterminate="indeterminate" :checked="AllCheckmedia"
										            @change="onCheckAllChange_media">
											全部
										</a-checkbox>
									</a-col>
									<div style="margin-left:-20px" class="plainoption">
										<a-checkbox-group v-model="checkedList_media" @change="onChange_media">

											<a-checkbox v-if="i<8" :value="item.mediaName" v-for="(item,i) in media_type">
												{{ item.mediaName }}
											</a-checkbox>
										</a-checkbox-group>
									</div>
								</a-row>
								<a-row style="position: relative;margin-left: -9.3%;" v-show="media_type.length >= 8">
									<a-col :span="21" :push="2" style="margin-left: 2%;">
										<a-checkbox-group v-model="checkedList_media2" @change="onChange_media1">
											<a-checkbox v-if="i>=8" :value="item.mediaName" v-for="(item,i) in media_type">
												{{ item.mediaName }}
											</a-checkbox>
										</a-checkbox-group>
									</a-col>
								</a-row>
							</a-checkbox-group>
						</a-form-item>
					</a-col>
				</a-row>
				<a-row style="margin-top: 3%">
					<a-col :span="15">
						<a-form-model-item label="层级深度" :label-col="{span:4}" :wrapper-col="{span:18}"
						                   style="width: 100%">
							<a-select placeholder="请选择" v-model="rulesForm.depth" disabled>
								<a-select-option value="1">1</a-select-option>
								<a-select-option value="2">2</a-select-option>
								<a-select-option value="3">3</a-select-option>
								<a-select-option value="4">4</a-select-option>
								<a-select-option value="5">5</a-select-option>
							</a-select>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row style="margin-left: -4%">
					<a-col :span="2" style="margin-left: 8%;">
						<span style="">规则范围：</span>
					</a-col>
					<a-col :span="15" style="margin-left: -2.5%;">
						<a-textarea placeholder="请输入正则表达式，例如<body[^>]*>({\s\S]*}>({\s\S*})<Vbody>。)" :rows="4"
						            :auto-size="{ minRows: 4, maxRows: 4 }" v-model="rulesForm.ruleRange"/>
					</a-col>
				</a-row>
				<a-row style="margin-left: 2%;">
					<a-col :span="2" style="margin-left: 1%;">
						<span style="color: black;"><span style="color:red;">*</span> 关键词组：</span>
					</a-col>
					<a-col :span="21" id="keywords2" style="">
						<a-row style="margin-left: 0%;width: 100%;height: auto;">
							<a-col :span="20" style="margin-left: 0%;padding: 10px 10px 10px 10px;">
								<a-textarea
										placeholder="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
										:rows="4" style="width: 94%;"
										:auto-size="{ minRows: 4, maxRows: 4 }" v-model="rulesForm.keyword1"/>
							</a-col>
							<a-col :span="4">
								<div style="margin-left:-30px">
									<img
											title="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
											src="../../assets/images/wenhao.svg" style="cursor:pointer"/>

									<div style="font-size: 14px;cursor:pointer;margin-top:10px" @click="addkeyworkGroup1(height_flat)">
										新增
									</div>
								</div>
							</a-col>
						</a-row>
						<!--关键词2-->
						<a-row v-if="height_keywork2_flag" style="margin-left: 0%;width: 100%;height: auto;" class="group6">
							<a-col :span="20" style="margin-left: 0%;padding: 0px 10px 10px 10px;">
								<a-textarea
										placeholder="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
										:rows="4" style="width: 94%;"
										:auto-size="{ minRows: 4, maxRows: 4 }" v-model="rulesForm.keyword2"/>
							</a-col>
							<a-col :span="4">
								<div style="margin-left:-30px">
									<img
											title="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
											src="../../assets/images/wenhao.svg" style="cursor:pointer"/>

									<div style="font-size: 14px;cursor: pointer;" @click="hideKeywordGroup1(1)">删除</div>
								</div>
							</a-col>
						</a-row>
						<!--关键词3-->
						<a-row v-if="height_keywork3_flag" style="margin-left: 0%;width: 100%;height: auto;" class="group7">
							<a-col :span="20" style="margin-left: 0%;padding: 0px 10px 10px 10px;">
								<a-textarea
										placeholder="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
										:rows="4" style="width: 94%;"
										:auto-size="{ minRows: 4, maxRows: 4 }" v-model="rulesForm.keyword3"/>
							</a-col>
							<a-col :span="4">
								<div style="margin-left:-30px">
									<img
											title="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
											src="../../assets/images/wenhao.svg" style="cursor:pointer"/>

									<div style="font-size: 14px;cursor: pointer;" @click="hideKeywordGroup1(2)">删除</div>
								</div>
							</a-col>
							-->
						</a-row>
						<!--关键词4-->
						<a-row v-if="height_keywork4_flag" style="margin-left: 0%;width: 100%;height: auto;" class="group8">
							<a-col :span="20" style="margin-left: 0%;padding: 0px 10px 10px 10px;">
								<a-textarea
										placeholder="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
										:rows="4" style="width: 94%;"
										:auto-size="{ minRows: 4, maxRows: 4 }" v-model="rulesForm.keyword4"/>
							</a-col>
							<a-col :span="4">
								<div style="margin-left:-30px">
									<img
											title="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
											src="../../assets/images/wenhao.svg" style="cursor:pointer"/>

									<div style="font-size: 14px;cursor: pointer;" @click="hideKeywordGroup1(3)">删除</div>
								</div>
							</a-col>
						</a-row>
						<!--关键词5-->
						<a-row v-if="height_keywork5_flag" style="margin-left: 0%;width: 100%;height: auto;" class="group9">
							<a-col :span="20" style="margin-left: 0%;padding: 0px 10px 10px 10px;">
								<a-textarea
										placeholder="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
										:rows="4" style="width: 94%;"
										:auto-size="{ minRows: 4, maxRows: 4 }" v-model="rulesForm.keyword5"/>
							</a-col>
							<a-col :span="4">
								<div style="margin-left:-30px">
									<img
											title="关键字用英文分号“;”分割。文本框中输入多个关键词时候，多个关键词之间是“并且”的关系。点击“新增”出现第二个文本框并输入关键词时，多个文本框之间是“或者”的关系。例如在第一个文本框输入：北京;天津，代表检索结果中需要同时包含“北京”和“天津”。点击新增后，在第二个文本框输入：上海;南京，代表检索结果中包含（“北京”和“天津”）或者（“上海”和“南京”）。"
											src="../../assets/images/wenhao.svg" style="cursor:pointer"/>

									<div style="font-size: 14px;cursor: pointer;" @click="hideKeywordGroup1(4)">删除</div>
								</div>
							</a-col>
						</a-row>
					</a-col>
				</a-row>

				<a-row style="margin-top: 10%;margin-left: -4%">
					<a-col :span="2" style="margin-left: 9%;">
						<span style="">歧义词：</span>
					</a-col>
					<a-col :span="15" style="margin-left: -3.5%;">
						<a-textarea
								placeholder="歧义词中所包含的关键词不生效。例如：关键词为【河北】，歧义词为【黄河北岸】，则【黄河北岸】不会作为【河北】的关键词被命中。"
								:rows="4"
								:auto-size="{ minRows: 4, maxRows: 4 }" v-model="rulesForm.ambiguousWords"/>
					</a-col>
				</a-row>

				<a-row style="margin-left: -4%">
					<a-col :span="2" style="margin-left: 9%;">
						<span style="">排除词：</span>
					</a-col>
					<a-col :span="15" style="margin-left: -3.5%">
						<a-textarea
								placeholder="选填项，含有排除词的信息不被系统抓获，多个词用英文分号(;)间隔。例如：关键词为【河北】，排除词为【邯郸】，则同时含有【河北】【邯郸】的信息不会抓取命中。"
								:rows="4"
								:auto-size="{ minRows: 4, maxRows: 4 }" v-model="rulesForm.excludedWords"/>
					</a-col>
				</a-row>
				<a-row style="margin-top: 8%;margin-left: -4%">
					<a-col :span="2" style="margin-left: 9%;">
						<span style="">负面词：</span>
					</a-col>
					<a-col :span="15" style="margin-left: -3.5%">
						<a-textarea
								placeholder="选填项，系统根据负面词将信息标注为负面，多个词用英文分号(;)间隔。例如：关键词为【河北】，排除词为【邯郸】，则同时含有【河北】【邯郸】的信息不会抓取命中。"
								:rows="4"
								:auto-size="{ minRows: 4, maxRows: 4 }" v-model="rulesForm.negativeWords"/>
					</a-col>
				</a-row>
				<a-row style="margin-top: 6%;">
					<a-col :span="15">
						<a-form-model-item label="作者" :label-col="{span:4}" :wrapper-col="{span:18}"
						                   style="width: 100%">
							<a-input placeholder="请输入作者" class="inputBox" v-model="rulesForm.author"/>
						</a-form-model-item>
					</a-col>

				</a-row>
				<a-row>
					<a-col :span="15">
						<a-form-model-item label="目标站点" :label-col="{span:4}" :wrapper-col="{span:18}"
						                   style="width: 100%">
							<a-input placeholder="多个域名请用英文逗号分隔" class="inputBox" v-model="rulesForm.targetWebsite"/>
						</a-form-model-item>
					</a-col>

				</a-row>
				<a-row>
					<div style="padding-left: 10.5%;line-height:20px">
						输入本对象关注的指定网站，如：本对象只关注百度贴吧和微博的信息， <br>
						添加：tieba.baidu.com,weibo.com
					</div>
				</a-row>
				<a-row>
					<a-col :span="15">
						<a-form-model-item label="排除站点" :label-col="{span:4}" :wrapper-col="{span:18}" style="width: 100%">
							<a-input placeholder="多个域名请用英文逗号分隔" class="inputBox" v-model="rulesForm.outSite"/>

						</a-form-model-item>
					</a-col>

				</a-row>
				<a-row>
					<div style="padding-left: 10.5%;line-height:20px">
						输入本对象排除的指定网站，如：本对象只排除百度贴吧和微博的信息，<br>
						添加：tieba.baidu.com,weibo.com
					</div>
				</a-row>
				<a-row style="padding-left: 3%">
					<a-col :span="9">
						<a-form-model-item :label-col="{span:5}" :wrapper-col="{span:18}"
						                   style="width: 100%">
							<span slot="label"><span style="color: red;">*</span>检测范围</span>
							<a-radio-group name="radioGroup" :default-value="3" v-model="rulesForm.testRange">
								<a-radio :value="1">
									全文
								</a-radio>
								<a-radio :value="2">
									段落
								</a-radio>
								<a-radio :value="3">
									自然句
								</a-radio>
							</a-radio-group>
						</a-form-model-item>
					</a-col>
					<a-col :span="9" v-show="ruleFlag == 1">
						<a-form-model-item :label-col="{span:4}" :wrapper-col="{span:18}"
						                   style="width: 100%">
							<span slot="label"><span style="color: red;">*</span>可见性</span>
							<a-radio-group name="radioGroup" v-model="rulesForm.isShow">
								<a-radio :value="1">
									系统
								</a-radio>
								<a-radio :value="2">
									仅自己
								</a-radio>
							</a-radio-group>
						</a-form-model-item>
					</a-col>
					<a-col :span="9" v-show="ruleFlag == 2">
						<a-form-model-item :label-col="{span:4}" :wrapper-col="{span:18}"
						                   style="width: 100%">
							<span slot="label"><span style="color: red;">*</span>可见性</span>
							<a-radio-group name="radioGroup" disabled v-model="rulesForm.isShow">
								<a-radio :value="1">
									系统
								</a-radio>
								<a-radio :value="2">
									仅自己
								</a-radio>
							</a-radio-group>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row style="padding-left: 3%">
					<a-col :span="9">
						<a-form-model-item :label-col="{span:5}" :wrapper-col="{span:18}"
						                   style="width: 100%">
							<span slot="label"><span style="color: red;">*</span>图像识别</span>
							<a-radio-group name="radioGroup" :default-value="2" v-model="rulesForm.imageRecognition">
								<a-radio :value="1">
									启用
								</a-radio>
								<a-radio :value="2">
									不启用
								</a-radio>
							</a-radio-group>
						</a-form-model-item>
					</a-col>
				</a-row>

				<a-row style="padding-left: 3%">
					<a-col :span="9">
						<a-form-model-item :label-col="{span:5}" :wrapper-col="{span:18}"
						                   style="width: 100%">
							<span slot="label"><span style="color: red;">*</span>预警推送</span>
							<a-switch style="" v-model="rulesForm.warningPush"/>
						</a-form-model-item>
					</a-col>
					<a-col :span="9">
						<a-form-model-item :label-col="{span:5}" :wrapper-col="{span:18}"
						                   style="width: 100%">
							<span slot="label"><span style="color: red;">*</span>是否订阅</span>
							<a-switch style="" v-model="rulesForm.subscribe"/>
						</a-form-model-item>
					</a-col>
				</a-row>
				<a-row style="margin-left: 4%">
					<a-col :span="20" style="text-align: center">
						<a-button style="margin-right: 10px;color: black" @click="goHomePage">返回</a-button>
						<a-button style="margin-right: 10px;background-color: #22AD38;color: white" @click="buttonAdd">
							添加
						</a-button>
						<a-button style="margin-right: 10px;color: black" @click="handleReset">重置</a-button>
					</a-col>
				</a-row>
			</a-form-model>
		</div>
	</a-layout-content>
</template>

<script>

import left from './left/index'
import rightTop from './right/top'

import {add,getRuleId} from '@/api/generalDetection/generalDetetion'
import {getMediaTypeList} from '@/api/generalDetection/generalDetetionResults'

const defaultCheckedList = [];
const defaultCheckedList2 = [];

export default {
	name: "generalDetectionAdd",
	components: {
		left,
		rightTop
	},
	data() {
		return {
			ruleFlag: 1, // 判断角色是否是普通业务人员角色
			commandId: undefined,
			keywork2_flag: false,
			keywork3_flag: false,
			keywork4_flag: false,
			keywork5_flag: false,
			height_keywork2_flag: false,
			height_keywork3_flag: false,
			height_keywork4_flag: false,
			height_keywork5_flag: false,
			flat: 0,
			height_flat: 0,//高级规则
			checkedList: defaultCheckedList,
			indeterminate: false,
			media_type: [],
			checkedList_media: [],
			checkedList_mediaId: [],
			checkedList_media2: [],
			AllCheckmedia: false,
			checkedList2: defaultCheckedList2,
			change: 1,
			form: this.$form.createForm(this), //搜索表单数据
			user: (JSON.parse(localStorage.getItem('user')) ? JSON.parse(localStorage.getItem('user')) : {
				'realName': "***"
			}),
			rulesForm: {
				author: undefined,
				ruleName: undefined,
				mediaType: [],
				targetWebsite: undefined,
				outSite: undefined,
				depth: 2,
				ruleRange: undefined,
				keyword1: '',
				keyword2: '',
				keyword3: '',
				keyword4: '',
				keyword5: '',
				ambiguousWords: '',
				excludedWords: '',
				negativeWords: '',
				testRange: 3,
				isShow: 2,
				imageRecognition: 2,
				warningPush: undefined,
				subscribe: undefined,
				advance: 0,//是否高级模式
			},
			//新增表单验证规则
			rules: {
				// ruleName: [{required: true, message: '请输入规则名称', trigger: 'blur'}],
				// oneEventType: [{required: true, message: '请选择一级事件类型', trigger: 'blur'}],
				// twoEventType: [{required: true, message: '请选择二级事件类型', trigger: 'blur'}],
				// threeEventType: [{required: true, message: '请选择三级事件类型', trigger: 'blur'}],
				checkedList_media: [{required: true, message: '请选择媒体类型', trigger: 'blur'}],
				keyword1: [{required: true, message: '请输入关键词组', trigger: 'blur'}],
				// emotionalPolarity: [{required: true, message: '请选择倾向性', trigger: 'blur'}],
				// radioGroup: [{required: true, message: '请选择可见性', trigger: 'blur'}],
			},
		}
	},
	props: {
		// 父类this
		parent: {
			type: Object,
		},
		commandId: {
			type: String
		},
		ruleName: {
			type: String
		}
	},
	methods: {


		// 媒体类型 (全部)
		onCheckAllChange_media(e) {
			this.AllCheckmedia = !this.AllCheckmedia
			if (this.AllCheckmedia) {
				this.media_type.forEach((item, i) => {
					if (i < 8) {
						this.checkedList_media.push(item.mediaName)
					}
				})
				this.media_type.forEach((item, i) => {
					if (i >= 8) {
						this.checkedList_media2.push(item.mediaName)
					}
				})
			} else {
				this.checkedList_media.splice(0)
				this.checkedList_media2.splice(0)
			}
		},

		// 媒体类型 (单个)
		onChange_media(e) {
			this.checkedList_media = [];
			this.checkedList_mediaId = [];
			this.checkedList_media = e;
			if (this.media_type.length === (this.checkedList_media.length + this.checkedList_media2.length)) {
				this.AllCheckmedia = true;
			} else {
				this.AllCheckmedia = false;
			}
		},

		// 媒体类型 (单个)
		onChange_media1(e) {
			this.checkedList_media2 = [];
			this.checkedList_mediaId = [];
			this.checkedList_media2 = e;
			if (this.media_type.length === (this.checkedList_media.length + this.checkedList_media2.length)) {
				this.AllCheckmedia = true;
			} else {
				this.AllCheckmedia = false;
			}
		},

		//重置搜索栏
		handleReset() {
			this.form.resetFields();
			this.rulesForm = {
				ruleName: undefined,
				mediaType: [],
				targetWebsite: undefined,
				outSite: undefined,
				depth: undefined,
				ruleRange: undefined,
				keyword1: '',
				keyword2: '',
				keyword3: '',
				keyword4: '',
				keyword5: '',
				ambiguousWords: '',
				excludedWords: '',
				negativeWords: '',
				testRange: 3,
				isShow: 2,
				imageRecognition: 2,
				warningPush: undefined,
				subscribe: undefined,
				advance: 0,//是否高级模式
			}
			this.checkedList_media = [];
			this.checkedList_mediaId = [];
		},

		goHomePage() {
			// this.parent.addrule = false;
			// this.parent.yys = true;
			this.$emit("gohome_add", false, this.commandId, this.ruleName)
		},


		// 添加关键词
		addkeyworkGroup(flat) {
			this.flat++;
			if (flat == 0) {
				this.keywork2_flag = true;
				this.keywork3_flag = false;
				this.keywork4_flag = false;
				this.keywork5_flag = false;
			}
			if (flat == 1) {
				this.keywork2_flag = true;
				this.keywork3_flag = true;
				this.keywork4_flag = false;
				this.keywork5_flag = false;
			}
			if (flat == 2) {
				this.keywork2_flag = true;
				this.keywork3_flag = true;
				this.keywork4_flag = true;
				this.keywork5_flag = false;
			}
			if (flat == 3) {
				this.keywork2_flag = true;
				this.keywork3_flag = true;
				this.keywork4_flag = true;
				this.keywork5_flag = true;
			}
		},
		addkeyworkGroup1(flat) {
			this.height_flat++
			console.log(this.height_flat)
			if (flat == 0) {
				this.height_keywork2_flag = true;
				this.height_keywork3_flag = false;
				this.height_keywork4_flag = false;
				this.height_keywork5_flag = false;
			}
			if (flat == 1) {
				this.height_keywork2_flag = true;
				this.height_keywork3_flag = true;
				this.height_keywork4_flag = false;
				this.height_keywork5_flag = false;
			}
			if (flat == 2) {
				this.height_keywork2_flag = true;
				this.height_keywork3_flag = true;
				this.height_keywork4_flag = true;
				this.height_keywork5_flag = false;
			}
			if (flat == 3) {
				this.height_keywork2_flag = true;
				this.height_keywork3_flag = true;
				this.height_keywork4_flag = true;
				this.height_keywork5_flag = true;
			}
		},


		// 删除关键词
		hideKeywordGroup(groupClass) {
			if (groupClass == 1) {
				this.keywork2_flag = false;
				this.rulesForm.keyword2 = '';
				this.flat--
			}
			if (groupClass == 2) {
				this.keywork3_flag = false;
				this.rulesForm.keyword3 = '';
				this.flat--
			}
			if (groupClass == 3) {
				this.keywork4_flag = false;
				this.rulesForm.keyword4 = '';
				this.flat--
			}
			if (groupClass == 4) {
				this.keywork5_flag = false;
				this.rulesForm.keyword5 = '';
				this.flat--
			}
		},
		//删除高级关键词
		hideKeywordGroup1(groupClass) {
			if (groupClass == 1) {
				this.height_keywork2_flag = false;
				this.rulesForm.keyword2 = '';
				this.height_flat--
			}
			if (groupClass == 2) {
				this.height_keywork3_flag = false;
				this.rulesForm.keyword3 = '';
				this.height_flat--
			}
			if (groupClass == 3) {
				this.height_keywork4_flag = false;
				this.rulesForm.keyword4 = '';
				this.height_flat--
			}
			if (groupClass == 4) {
				this.height_keywork5_flag = false;
				this.rulesForm.keyword5 = '';
				this.height_flat--
			}
		},

		callback(tag) {
			console.log("tagatatgtsag===" + tag)
			if (tag == 1) {
				this.change = 1;
			}
			if (tag == 2) {
				this.change = 2;
			}
		},
		onSubmit() {
			console.log('submit!', this.form);
		},
		buttonAdd() {
			if (this.rulesForm.ruleRange != undefined && this.rulesForm.ruleRange != "") {
				this.rulesForm.advance = 1;
			} else {
				this.rulesForm.advance = 0;
			}
			var keywordsList = [];
			if (this.rulesForm.keyword1 != undefined && this.rulesForm.keyword1 != "") {
				keywordsList.push(this.rulesForm.keyword1);
			}
			if (this.rulesForm.keyword2 != undefined && this.rulesForm.keyword2 != "") {
				keywordsList.push(this.rulesForm.keyword2);
			}
			if (this.rulesForm.keyword3 != undefined && this.rulesForm.keyword3 != "") {
				keywordsList.push(this.rulesForm.keyword3);
			}
			if (this.rulesForm.keyword4 != undefined && this.rulesForm.keyword4 != "") {
				keywordsList.push(this.rulesForm.keyword4);
			}
			if (this.rulesForm.keyword5 != undefined && this.rulesForm.keyword5 != "") {
				keywordsList.push(this.rulesForm.keyword5);
			}
			if (this.checkedList.length != 0) {
				this.rulesForm.mediaType = this.checkedList;
			}

			if (this.checkedList2.length != 0) {
				this.rulesForm.mediaType = this.checkedList2;
			}

			let mediaTypeIdList = [];
			this.checkedList_media.forEach((item) => {
				mediaTypeIdList.push(item)
			});
			this.checkedList_media2.forEach((item) => {
				mediaTypeIdList.push(item)
			});
			for (let i = 0; i < mediaTypeIdList.length; i++) {
				for (let k = 0; k < this.media_type.length; k++) {
					if (mediaTypeIdList[i] == this.media_type[k].mediaName) {
						this.checkedList_mediaId.push(this.media_type[k].id)
					}
				}
			}


			if (this.rulesForm.ruleName == undefined || this.rulesForm.ruleName == '') {
				this.$message.error('请输入规则');
				return
			}

			if (this.checkedList_mediaId == [] || this.checkedList_mediaId.length <= 0) {
				this.$message.error('请选择媒体类型');
				return
			}

			if (keywordsList == [] || keywordsList.length <= 0) {
				this.$message.error('请输入关键词组');
				return
			}


			/*this.$refs.ruleForm.validate(valid => {
					if (valid) {*/
			add({
				"ruleName": this.rulesForm.ruleName,
				"mediaType": mediaTypeIdList.join(","),
				"mediaTypeIds": this.checkedList_mediaId.join(","),
				"targetWebsite": this.rulesForm.targetWebsite,
				"depth": this.rulesForm.depth,
				"keywordsList": keywordsList,
				"ruleRange": this.rulesForm.ruleRange,
				"ambiguousWords": this.rulesForm.ambiguousWords,
				"excludedWords": this.rulesForm.excludedWords,
				"negativeWords": this.rulesForm.negativeWords,
				"testRange": this.rulesForm.testRange,
				"isShow": this.rulesForm.isShow,
				"imageRecognition": this.rulesForm.imageRecognition,
				"warningPush": this.rulesForm.warningPush ? 1 : 0,
				"subscribe": this.rulesForm.subscribe ? 1 : 0,
				"advance": this.rulesForm.advance,
				"outSite": this.rulesForm.outSite,
				"author": this.rulesForm.author,
			}).then(res => {
				if (res.status == 200) {
					this.$message.success('规则创建成功！日志正在生成中，请等待...');
					this.goHomePage();
					this.parent.addrule = false;
					this.parent.yys = true;
					this.parent.init();
				} else {
					this.$message.error('执行失败');
				}
			}).catch(err => {
				console.log(err)
			})
			/*   }else {
						 console.log('error submit!!');
						 return false;
				 }
		 });*/
		},

	},
	mounted() {
		// 获取媒体类型
		getMediaTypeList().then(res => {
			this.media_type = res.data;
		});

		getRuleId().then(res => {
			// 如果角色是普通业务人员
			if (res.data == "ROLE.ORDINARY.BUSINESS") {
				this.ruleFlag = 2;
			}
		});
	}
}
</script>

<style scoped lang="scss">


.inputBox {
	height: 40px;
}

/deep/ .ant-select-selection--single {
	height: 40px;
}

/deep/ .ant-select-selection__rendered {
	height: 35px;
}

.right-content {
	margin-bottom: 40px;

	.ant-row {
		height: 50px;
		line-height: 50px;

		.content-left {
			text-align: right;
			font-size: 14px;
			height: 100%;
		}

		.content-right {
			float: right;
			height: 100%;
			position: relative;
			left: -30px;

			.ant-input {
				width: 480px;
				height: 40px;
				border-radius: 3px;
			}
		}
	}
}

/deep/ .ant-tabs-bar {
	border-bottom: 0px solid #e8e8e8 !important;
}

/deep/ .ant-tabs-tab {
	font-size: 15px !important;
}

.listv2-root {
	width: 100%;
	height: 100%;
	position: relative;
}

/deep/ .ant-list-item-meta-avatar {
	margin-right: 0px;
}

/deep/ .buttona1 > span {
	color: black;
	font-size: 13px;
	cursor: pointer;
}

#keywords {
	margin-left: -1.5%;
	overflow: auto;
	max-height: 110px;
	background: #F7F7F7;
}

#keywords2 {
	margin-left: -1.5%;
	overflow: auto;
	max-height: 110px;
	background: #F7F7F7;
}
</style>
